<template>
    <div class="app-container">
        <div class="customContainer markContainer">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-select placeholder="母品牌" v-model="formInline.org_id">
                        <el-option v-for="item in fristBrand" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.brand_id" placeholder="请输入子品牌ID/名称" style="width:250px" @keyup.enter.native="onSubmit"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                </el-form-item>
            </el-form>

            <!-- 列表 -->
            <el-table  highlight-current-row :data="list" v-loading.body="listLoading" border fit size="small">
                <el-table-column align="center" label="子品牌ID" prop="id" width="80"></el-table-column>
                <el-table-column align="center" label='子品牌名称' prop="name"></el-table-column>
                <el-table-column align="center" label="所属母品牌" prop="org_name"></el-table-column>
                <el-table-column align="center" label='品牌类型'>
                    <template slot-scope="scope">
                        {{scope.row.brand_type==1? '公司' : '个人'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="公司名称" prop="company_name"></el-table-column>
                <el-table-column align="center" label='负责人' prop="responsible_person"></el-table-column>
                <el-table-column align="center" label='手机号' prop="phone"></el-table-column>
                <el-table-column align="center" label='创建时间' prop="create_time"></el-table-column>
                <!-- 列表的操作按钮 -->
                <el-table-column align="center" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="addEditClick(1,scope.row.id)" type="primary" size="mini">详情</el-button>
                        <el-button @click="addEditClick(2,scope.row.id)" type="primary" icon="el-icon-edit" size="mini"></el-button>
                        <el-button @click="del_brandSecond(scope.row.id,scope.$index)" type="danger" icon="el-icon-delete" size="mini"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 弹框 -->
            <el-dialog :close-on-click-modal="false"  :title="dialogTitle" :visible.sync="dialogFormVisible" @close="callOf('saveForm')">
                <el-form :model="saveForm" :inline="true" ref="saveForm" class="markForm" style="width:580px;margin:0 auto;">
                    <el-form-item label="母品牌　" prop="org_id">
                        <el-select v-model="saveForm.org_id" placeholder="母品牌" :disabled="isDisabled">
                            <el-option v-for="item in fristBrand" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="子品牌" prop="name">
                        <el-input :disabled="isDisabled" v-model="saveForm.name" class="w200"></el-input>
                    </el-form-item>
                    <hr>
                    <el-form-item label="商户信息" prop="d"> </el-form-item>
                    <br>
                    <div>
                        <el-form-item label="品牌类型" prop="brand_type"> </el-form-item>
                        <el-radio-group :disabled="isDisabled" v-model="saveForm.brand_type">
                            <el-radio label="1">公司</el-radio>
                            <el-radio label="0">个人</el-radio>
                        </el-radio-group>
                    </div>
                    <el-form-item label="负责人　" prop="responsible_person">
                        <el-input :disabled="isDisabled" v-model="saveForm.responsible_person" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号　" prop="phone">
                        <el-input :disabled="isDisabled" v-model="saveForm.phone" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱　　" prop="email">
                        <el-input :disabled="isDisabled" v-model="saveForm.email" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证　" prop="identification_card">
                        <el-input :disabled="isDisabled" v-model="saveForm.identification_card" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="联系地址" prop="address">
                        <el-input :disabled="isDisabled" v-model="saveForm.address" class="w200"></el-input>
                    </el-form-item>
                    <hr>
                    <el-form-item label="收款信息" prop="d"> </el-form-item>
                    <br>
                    <div>
                        <el-form-item label="账户类型" prop="account_type"> </el-form-item>
                        <el-radio-group :disabled="isDisabled" v-model="saveForm.account_type">
                            <el-radio label="1">公司</el-radio>
                            <el-radio label="0">个人</el-radio>
                        </el-radio-group>
                    </div>
                    <el-form-item label="银行卡号" prop="bank_card">
                        <el-input :disabled="isDisabled" v-model="saveForm.bank_card" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="开户行　" prop="opening_bank">
                        <el-input :disabled="isDisabled" v-model="saveForm.opening_bank" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="收款名称" prop="collection_name">
                        <el-input :disabled="isDisabled" v-model="saveForm.collection_name" class="w200"></el-input>
                    </el-form-item>
                    <hr>
                    <el-form-item label="其他信息" prop="d"> </el-form-item>
                    <br>
                    <el-form-item label="分成比例" prop="divide_proportion">
                        <el-input :disabled="isDisabled" v-model="saveForm.divide_proportion" class="w200"></el-input>%
                    </el-form-item>
                    <el-form-item label="押金(元)" prop="security_deposit">
                        <el-input :disabled="isDisabled" v-model="saveForm.security_deposit" class="w200"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button v-if="dialogTitle=='详情'" type="primary" @click="addEditClick(2,saveForm.id)">编辑</el-button>
                    <el-button v-if="dialogTitle=='修改'||dialogTitle=='新增'" type="primary" @click="saveClick('saveForm')">保存</el-button>
                </div>
                <br>
                <br>
            </el-dialog>
        </div>

        <!-- 自定义底部 -->
        <div class="bottom_box">
            <div class="pull-right">
                <el-button type="primary" size="small" @click="org_click()" disabled>母品牌管理</el-button>
                <el-button type="primary" size="small" @click="addEditClick()">新增子品牌</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        fristBrandList,
        mark_look,
        edit_brand,
        del_brandSecond,
        get_one,
        save,
        org_click
    } from "@/api/information/mark.js";
    export default {
        data() {
            return {
                list: null,
                listLoading: false,
                isDisabled: false,
                fristBrand: [],
                secondBrand: [],
                formInline: {
                    org_id: "",
                    brand_id: ""
                },
                saveForm: {
                    org_name: "",
                    account_type: "",
                    address: "",
                    bank_card: "",
                    brand_type: "",
                    collection_name: "",
                    company_name: "",
                    create_time: "",
                    divide_proportion: "",
                    email: "",
                    id: "",
                    identification_card: "",
                    intro: "",
                    is_del: "",
                    is_support_commiss: "",
                    name: "",
                    opening_bank: "",
                    org_id: "",
                    phone: "",
                    responsible_person: "",
                    security_deposit: ""
                },
                dialogTitle: "",
                dialogFormVisible: false
            };
        },
        created() {
            this.fetchData();
            this.getFristBrand();
        },
        methods: {
            saveClick(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        save(this.saveForm, this.url).then(response => {
                            if (response.code == 1) {
                                if (this.editIndex || this.editIndex === 0) {
                                    this.list[this.editIndex].no = this.saveForm.no;
                                }
                                this.dialogFormVisible = false;
                                this.$message({
                                    type: "success",
                                    message: response.message
                                });
                            } else {
                                this.$message({
                                    type: "error",
                                    message: response.message
                                });
                            }
                        });
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            onSubmit() {
                this.fetchData();
            },
            getFristBrand() {
                fristBrandList().then(response => {
                    this.fristBrand = response;
                });
            },
            addEditClick(stat, id) {
                this.dialogFormVisible = true;
                this.dialogTitle = stat == 2 ? "修改" : stat == 1 ? "详情" : "新增";
                this.url = stat == 2 ? "Brand_first/edit" : stat == 1 ? "" : "/Brand_first/create";
                this.isDisabled = stat == 1 ? true : false;
                if (stat == 1 || stat == 2) {
                    get_one({ id: id }).then(response => {
                        this.BrandInfo = response;
                        this.saveForm.id = this.BrandInfo.id;
                        this.saveForm.org_id = this.BrandInfo.org_id;
                        this.saveForm.name = this.BrandInfo.name;
                        this.saveForm.brand_type = this.BrandInfo.brand_type;
                        this.saveForm.responsible_person = this.BrandInfo.responsible_person;
                        this.saveForm.phone = this.BrandInfo.phone;
                        this.saveForm.email = this.BrandInfo.email;
                        this.saveForm.identification_card = this.BrandInfo.identification_card;
                        this.saveForm.address = this.BrandInfo.address;
                        this.saveForm.account_type = this.BrandInfo.account_type;
                        this.saveForm.bank_card = this.BrandInfo.bank_card;
                        this.saveForm.opening_bank = this.BrandInfo.opening_bank;
                        this.saveForm.collection_name = this.BrandInfo.collection_name;
                        this.saveForm.divide_proportion = this.BrandInfo.divide_proportion;
                        this.saveForm.security_deposit = this.BrandInfo.security_deposit;
                        this.saveForm.listLoading = false;
                    });
                }
            },
            org_click() {
                org_click();
            },
            del_brandSecond(id, index) {
                this.$confirm("此操作删除, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    del_brandSecond(id).then(response => {
                        if (response.code == 1) {
                            this.list.splice(index, 1);
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                        }
                    });
                });
            },
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                });
            },
            // 表单认证
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //关闭弹框重置
            callOf(formName) {
                this.dialogFormVisible = false;
                this.saveForm.org_id = '';
                this.$refs[formName].resetFields();
                this.fetchData();
            }
        }
    };
</script>
<style>
    .markForm .el-form-item {
        margin-bottom: 10px !important
    }

    .markContainer .el-dialog {
        width: 660px;
        margin-top: 5vh !important
    }
</style>